<template>
  <view class="container">
    <view class="header">
      <text class="title">我的账单</text>
      <view class="filter-tabs">
        <view 
          class="tab-item" 
          v-for="(tab, index) in tabs" 
          :key="index"
          :class="{ active: currentTab === tab.value }"
          @click="switchTab(tab.value)"
        >
          {{ tab.name }}
        </view>
      </view>
    </view>
    
    <!-- 账单统计 -->
    <view class="summary-card">
      <view class="summary-item">
        <text class="summary-label">待缴费</text>
        <view class="amount-container">
          <text class="summary-value">{{ summary.unpaid }}</text>
          <text class="unit">元</text>
        </view>
      </view>
      <view class="divider"></view>
      <view class="summary-item">
        <text class="summary-label">已缴费</text>
        <view class="amount-container">
          <text class="summary-value">{{ summary.paid }}</text>
          <text class="unit">元</text>
        </view>
      </view>
    </view>
    
    <!-- 账单列表 -->
    <view class="bill-list" v-if="filteredBills.length > 0">
      <view 
        class="bill-item" 
        v-for="(item, index) in filteredBills" 
        :key="index"
        @click="viewBillDetail(item.id)"
      >
        <view class="bill-header">
          <text class="bill-type">{{ item.bill_type }}</text>
          <text class="bill-status" 
                :class="getBillStatusClass(item.payment_status)" 
                @click.stop="item.payment_status === '未支付' && item.id ? payBill(item) : ''"
                :style="item.payment_status === '未支付' && item.id ? 'cursor: pointer;' : ''">
            {{ getBillStatusText(item.payment_status) }}
          </text>
        </view>
        
        <view class="bill-main-content">
          <view class="bill-left-content">
            <view class="bill-period-row" v-if="item.bill_period">
              <text class="bill-period">{{ item.bill_period }}</text>
            </view>
            <view class="bill-address-row" v-if="item.remarks">
              <text class="bill-address">{{ item.remarks }}</text>
            </view>
            <view class="bill-date-row">
              <text class="bill-date-label">到期日: </text>
              <text class="bill-date-value">{{ item.due_date }}</text>
            </view>
          </view>
          
          <view class="bill-right-content">
            <view class="bill-amount-row">
              <text class="amount-label">应缴:</text>
              <text class="amount-value">¥{{ item.amount }}</text>
            </view>
          </view>
        </view>
        
        <view class="bill-footer">
          <view class="bill-actions">
            <text class="action-btn detail-btn" @click.stop="viewBillDetail(item.id)">查看详情</text>
            <text v-if="item.payment_status === '未支付' && item.id" 
                  class="action-btn pay-btn" 
                  @click.stop="payBill(item)">立即缴费</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <image class="empty-image" src="/static/empty.png"></image>
      <text class="empty-text">暂无{{ getEmptyText() }}账单</text>
    </view>
  </view>
</template>

<script>
import { getUserBills } from '../../api/billing.js';

export default {
  data() {
    return {
      currentTab: 'all',
      tabs: [
        { name: '全部', value: 'all' },
        { name: '待缴费', value: 'unpaid' },
        { name: '已缴费', value: 'paid' }
      ],
      summary: {
        unpaid: '0.00',
        paid: '0.00'
      },
      bills: []
    }
  },
  computed: {
    filteredBills() {
      if (this.currentTab === 'all') {
        return this.bills
      } else if (this.currentTab === 'unpaid') {
        return this.bills.filter(bill => bill.payment_status === '未支付')
      } else {
        return this.bills.filter(bill => bill.payment_status === '已支付')
      }
    }
  },
  onLoad() {
    this.fetchBills()
  },
  onPullDownRefresh() {
    this.fetchBills()
  },
  methods: {
    // 获取账单列表
    fetchBills() {
      uni.showLoading({
        title: '加载中...'
      })
      
      getUserBills().then(res => {
        if (res.code === 200 && res.data) {
          this.bills = res.data.bills || []
          
          // 更新统计信息
          if (res.data.summary) {
            // 格式化金额，确保显示两位小数
            this.summary.unpaid = parseFloat(res.data.summary.unpaid_total || 0).toFixed(2)
            this.summary.paid = parseFloat(res.data.summary.paid_total || 0).toFixed(2)
          }
        } else {
          uni.showToast({
            title: res.message || '获取账单失败',
            icon: 'none'
          })
        }
      }).catch(err => {
        console.error('获取账单失败:', err)
        uni.showToast({
          title: '获取账单失败，请稍后重试',
          icon: 'none'
        })
      }).finally(() => {
        uni.hideLoading()
        uni.stopPullDownRefresh()
      })
    },
    
    // 切换标签
    switchTab(tab) {
      this.currentTab = tab
    },
    
    // 获取账单状态文本
    getBillStatusText(status) {
      const statusMap = {
        '未支付': '待缴费',
        '已支付': '已缴费',
        '逾期': '已逾期'
      }
      return statusMap[status] || status
    },
    
    // 获取账单状态样式类
    getBillStatusClass(status) {
      const classMap = {
        '未支付': 'status-unpaid',
        '已支付': 'status-paid',
        '逾期': 'status-overdue'
      }
      return classMap[status] || ''
    },
    
    // 查看账单详情
    viewBillDetail(id) {
      uni.navigateTo({
        url: `/pages/billing/detail?id=${id}`
      })
    },
    
    // 缴费
    payBill(bill) {
      if (!bill || !bill.id) {
        console.error('无效的账单数据:', bill);
        uni.showToast({
          title: '无效的账单数据',
          icon: 'none'
        });
        return;
      }
      
      console.log('跳转到支付页面，账单ID:', bill.id);
      uni.navigateTo({
        url: `/pages/billing/payment?id=${bill.id}`
      })
    },
    
    // 获取空状态文本
    getEmptyText() {
      if (this.currentTab === 'unpaid') {
        return '待缴费'
      } else if (this.currentTab === 'paid') {
        return '已缴费'
      } else {
        return ''
      }
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #F2F2F7;
  min-height: 100vh;
}

.header {
  margin-bottom: 30rpx;
}

.title {
  font-size: 34rpx;
  font-weight: 600;
  margin-bottom: 24rpx;
  display: block;
  color: #1C1C1E;
}

.filter-tabs {
  display: flex;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12rpx;
  overflow: hidden;
  padding: 4rpx;
  box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.03);
  width: 100%;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  font-size: 28rpx;
  color: #8E8E93;
  position: relative;
  margin: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.tab-item.active {
  color: #4A89DC;
  font-weight: 500;
  background-color: transparent;
  border-radius: 8rpx;
  border-bottom: 3rpx solid #4A89DC;
}

.tab-item.active::after {
  display: none;
}

.summary-card {
  display: flex;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.03);
}

.summary-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
}

.summary-label {
  font-size: 28rpx;
  color: #8E8E93;
  margin-bottom: 10rpx;
}

.summary-value {
  font-size: 38rpx;
  font-weight: 600;
  color: #1C1C1E;
  line-height: 1;
}

.amount-container {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.unit {
  font-size: 24rpx;
  color: #8E8E93;
  margin-left: 4rpx;
  font-weight: normal;
}

.divider {
  width: 1rpx;
  background-color: #E5E5EA;
  margin: 0 20rpx;
}

.bill-list {
  margin-top: 16rpx;
}

.bill-item {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.bill-type {
  font-size: 30rpx;
  font-weight: 600;
  color: #1C1C1E;
}

.bill-status {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
}

.status-unpaid {
  background: transparent;
  color: #F5A623;
  border: 1rpx solid #F5A623;
}

.status-paid {
  background: transparent;
  color: #4CD964;
  border: 1rpx solid #4CD964;
}

.status-overdue {
  background: transparent;
  color: #D85140;
  border: 1rpx solid #D85140;
}

.bill-main-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16rpx;
  padding: 10rpx 0;
}

.bill-left-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bill-period-row {
  margin-bottom: 8rpx;
}

.bill-period {
  font-size: 26rpx;
  color: #48484A;
}

.bill-address-row {
  margin-bottom: 8rpx;
}

.bill-address {
  font-size: 24rpx;
  color: #8E8E93;
}

.bill-date-row {
  display: flex;
  align-items: baseline;
}

.bill-date-label {
  font-size: 24rpx;
  color: #8E8E93;
  margin-right: 8rpx;
}

.bill-date-value {
  font-size: 24rpx;
  color: #1C1C1E;
  font-weight: 500;
}

.bill-right-content {
  text-align: right;
}

.bill-amount-row {
  display: flex;
  align-items: baseline;
}

.amount-label {
  font-size: 24rpx;
  color: #8E8E93;
  margin-right: 8rpx;
}

.amount-value {
  font-size: 34rpx;
  font-weight: 600;
  color: #FF453A;
  text-align: right;
}

.bill-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 16rpx;
  border-top: 1rpx solid #F2F2F7;
}

.bill-actions {
  display: flex;
  justify-content: flex-end;
}

.action-btn {
  font-size: 26rpx;
  padding: 8rpx 24rpx;
  border-radius: 8rpx;
  font-weight: 500;
  background-color: transparent;
  color: #4A89DC;
  border: 1rpx solid #4A89DC;
  margin-left: 16rpx;
  min-width: 120rpx;
  text-align: center;
}

.pay-btn {
  background-color: #4A89DC;
  color: #FFFFFF;
  border: none;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 24rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #8E8E93;
  font-weight: 500;
}
</style> 